import { FC, useEffect, useRef } from "react";
import { Outlet } from "react-router-dom";
const Navigation: FC = () => {
  const scrollRef = useRef<HTMLElement>(null);
  useEffect(() => {
    let intersectionObserver: any = new IntersectionObserver(function (entries) {
      console.log(entries);
      console.log(entries[0].isIntersecting);
    });
    intersectionObserver.observe(scrollRef.current as HTMLElement);
    return () => {
      intersectionObserver.unobserve(scrollRef.current as HTMLElement);
      intersectionObserver = void 0;
    };
  });
  return (
    <div className=' top-0'>
      <header
        ref={scrollRef}
        className=' h-14 sticky top-0 flex flex-row items-center justify-start w-full px-16 bg-white'
      >
        <img
          className=' w-26 h-5'
          src='//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg'
          alt=''
        />
        <Menu />
      </header>
      <Outlet />
    </div>
  );
};

const Menu: FC = () => (
  <div className='flex items-center'>
    <a
      href='./'
      className=' hover:border-b-blue-500 h-14 flex items-center ml-6 text-sm text-blue-500 border-b-2 border-transparent'
    >
      首页
    </a>
    <a
      href='./pins'
      className=' hover:border-b-blue-500 h-14 flex items-center ml-6 text-sm border-b-2 border-transparent'
    >
      沸点
    </a>
    <a
      href='./course'
      className=' hover:border-b-blue-500 h-14 flex items-center ml-6 text-sm border-b-2 border-transparent'
    >
      课程
    </a>
    <a
      href='./live'
      className=' hover:border-b-blue-500 h-14 flex items-center ml-6 text-sm border-b-2 border-transparent'
    >
      直播
    </a>
    <a
      href='./hot'
      className=' hover:border-b-blue-500 h-14 flex items-center ml-6 text-sm border-b-2 border-transparent'
    >
      活动
    </a>
    <a
      href='./hot'
      className=' hover:border-b-blue-500 h-14 flex items-center ml-6 text-sm border-b-2 border-transparent'
    >
      竞赛
    </a>
    <a
      href='./hot'
      className=' hover:border-b-blue-500 h-14 flex items-center ml-6 text-sm border-b-2 border-transparent'
    >
      商城
    </a>
    <a
      href='./hot'
      className=' hover:border-b-blue-500 h-14 flex items-center ml-6 text-sm border-b-2 border-transparent'
    >
      APP
    </a>
    <a
      href='./hot'
      className=' hover:border-b-blue-500 h-14 flex items-center ml-6 text-sm border-b-2 border-transparent'
    >
      插件
    </a>
  </div>
);

export default Navigation;
